import React from 'react';
import Player from 'aliplayer-react';
import close from '@/assets/images/close.png';
import css from './index.module.less';

interface propType {
    url:string,
    closeF:Function,
}

function Phone(props:propType) {
  const { url, closeF } = props;
  const config = {
    source: url,
    width: '315px',
    height: '590px',
    autoplay: true,
    isLive: true,
    rePlay: false,
    playsinline: true,
    preload: true,
    skinLayout: false,
    controlBarVisibility: 'never',
    showBarTime: 0,
    useH5Prism: true,
    enableStashBufferForFlv: true,
    stashInitialSizeForFlv: 20,
    components: [
      {
        name: 'RateComponent',
        type: Player.components.RateComponent,
      },
    ],
  };
  return (
    <div className={css.phone_box}>
      <Player
        config={config}
      />
      <div className={css.mask} />
      <div className={css.close} onClick={() => closeF()}>
        <img src={close} alt="" />
      </div>
    </div>
  );
}

export default Phone;
